<template>

  <el-table :data="tableData" style="width: 100%" border id="tableData">
    <el-table-column fixed prop="stationOrderId" label="换电站订单号" width="300"/>
    <el-table-column prop="platformKey" label="platformKey" width="120"/>
    <el-table-column prop="vin" label="vin码" width="200"/>
    <el-table-column prop="carNo" label="车牌号" width="120"/>
    <el-table-column prop="downBatteryNo" label="换下电池" width="300"/>
    <el-table-column prop="upBatteryNo" label="换上电池" width="300"/>
    <el-table-column prop="odoSum" label="里程数" width="120"/>
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button-group>
          <el-button link type="primary" size="small" @click="reGetQRCode(scope.row)">
            二维码
          </el-button>
          <el-button link type="primary" size="small" @click="reportCompletionSwap(scope.row)">上报换电完成</el-button>
          <el-button link type="primary" size="small" @click="reportCompletionChange(scope.row)">上报充电完成
          </el-button>
        </el-button-group>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="qrcodeShow" width="270px" title="二维码" center @opened="opened">
    <div class="qrcode" ref="qrCodeUrl"></div>
  </el-dialog>


</template>

<script setup lang="ts" name="AutoChangeRecords">
import {getCurrentInstance, onMounted, reactive, ref} from 'vue'
import * as autoChangeHttp from './auto-change'
import QRCode from 'qrcodejs2-fix'

const qrcodeShow = ref(false)
const {proxy} = getCurrentInstance()
const creatQrCode = (value) => {
  console.log("qrCodeUrl", proxy.$refs.qrCodeUrl, value)
  var qrcode = new QRCode(proxy.$refs.qrCodeUrl, {
    text: value, // 需要转换为二维码的内容
    width: 220,
    height: 220,
    colorDark: '#000000',
    colorLight: '#ffffff',
    correctLevel: QRCode.CorrectLevel.H
  })
  console.log(qrcode, 'qrcode')
  return qrcode.value
}


interface recordData {
  vin: String,
  odoSum: Number,
  carNo: String,
  upBatteryNo: String,
  downBatteryNo: String,
  platformKey: String,
  secret: String,
  code: String
  stationOrderId: String
}

let elDialogData: recordData = reactive({})

const reGetQRCode = (row) => {
  qrcodeShow.value = true
  elDialogData = row;
}
const opened = () => {
  let qrCodeContain = proxy.$refs.qrCodeUrl
  qrCodeContain.textContent = ''
  creatQrCode(elDialogData.code)
  qrCodeContain.firstChild.style = "display: none;"
}

const reportCompletionSwap = (row) => {
  autoChangeHttp.submitSwapComplete(row)
}

const reportCompletionChange = (row) => {
  autoChangeHttp.submitChargingComplete(row)
}

onMounted(() => {
  searchRecordList();
})

const searchRecordList = () => {
  autoChangeHttp.recordList().then((response) => {
    let data = response.data
    tableData.length = 0
    data.forEach(e => {
      tableData.push(e);
    });
  })
}
const tableData: [recordData] = reactive([])
</script>

<style scoped>
#tableData {
  display: flex;
  justify-content: center;
}
</style>